<template>
  <div class="test">


    <!-- 300ms 延迟问题  -->
    <!-- <p class="hello">hello ffff</p>
    <button @click="aaa">点击</button>

    <button @click="aaa" v-on:touchstart="ddd">
      300ms
    </button> -->




    <div class="b">
       <div class="a">
          <iframe 
          src="//player.bilibili.com/player.html?aid=842702161&bvid=BV1m54y1r7ng&cid=254142796&page=1" 
          scrolling="no" 
          border="0" 
          frameborder="no" 
          framespacing="0" 
          allowfullscreen="true"> </iframe>
       </div>
    </div>





  


















    <ul
      @touchstart.stop.prevent="touchstart"
      @touchmove.stop.prevent="touchmove"
      @touchend.stop.prevent="touchend"
    >
      <li>我是内部的li</li>
      <li>我是内部的li</li>
      <li>我是内部的li</li>
      <li>我是内部的li</li>
      <li>我是内部的li</li>
      <li>我是内部的li</li>
      <li>我是内部的li</li>
      <li>我是内部的li</li>
      <li>我是内部的li</li>
      <li>我是内部的li</li>
      <li>我是内部的li</li>
    </ul>
  </div>
</template>

<script>
export default {
  //组件名字
  name: "comfilmlisttopnav",
  //接收父组件给的东西 type是接收什么东西  default 默认值
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    color: {
      type: String,
      default: "#000",
      distanceX:0,
      distanceY:0,
     touchStartPointX:0,
      touchStartPointY:0
    },
  },
  //组件注册
  components: {},
  // vue数据集中管理
  data() {
    return {};
  },
  //方法 函数写这里
  methods: {
    aaa(){

      console.log('aaa', Date.now())
      // console.log('222',Date.now())
    },
    ddd(){

      console.log('ddd', Date.now())
    },
    touchstart(event){
      console.log('touchsart')
      // 获得起点X坐标，初始化distance为0
      this.touchStartPointX = event.targetTouches[0].pageX;
      console.log(this.touchStartPointX)
      this.touchStartPointY = event.targetTouches[0].pageY;
      // console.log(this.touchStartPoint);
      this.distanceX = 0;
      this.distanceY = 0;
    },
    touchmove(event){
      console.log('touchmove')
      //这个位置是 检测你是否多个手指 不让你乱滑
        if (event.targetTouches.length > 1) {
          return;
        }
        // console.log(event.targetTouches[0].pageX);
        // 实时计算distance
   
        this.distanceX = event.targetTouches[0].pageX - this.touchStartPointX;
        console.log('没减过',event.targetTouches[0].pageX)
        this.distanceY = event.targetTouches[0].pageY - this.touchStartPointY;
        // 根据distance在页面上做出反馈。这里演示通过返回按钮的背景变化作出反馈
        console.log('this.distanceX',this.distanceX)
        console.log('this.distanceY',this.distanceY)
     
    },
    touchend(event){
      console.log('touchend')
      console.log('x',this.distanceX)
      console.log('y',this.distanceY)
      if (this.distanceX > 100) {
           console.log('滑动距离超过100')
      }
       
  },

  },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {
    toUpcase(value) {
      return value ? value.toUpperCase() : "";
    },
  },
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {},
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  mounted() {},
  //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {},
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //组件路由守卫enter
  beforeRouteEnter(to, from, next) {
    next((vm) => {});
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  },
  //组件路由守卫update更新
  beforeRouteUpdate(to, from, next) {
    // 同一页面，刷新不同数据时调用，
    next();
  },
  //组件路由守卫离开
  beforeRouteLeave(to, from, next) {
    // 离开当前路由页面时调用
    next();
  },

}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.test {
  /* width: 320px; */
  width: 20rem;
  /* height: 320px; */
  height: 20rem;
  /* background-color: aqua; */
  text-align: center;
}
/* .hello {
  color: blueviolet;
  font-size: 1rem;
} */





/* 写样式 b站视频 */
.b {
  width: 20rem;
}

.a {
  margin: 0 auto;
  position: relative;
  width: 70%;
  height: 0;
  padding-bottom: 75%;
}

.a iframe {
  position: absolute;
  width: 100%;
  height: 70%;
  left: 0;
  top: 0;
}


</style>
